
import styled from 'styled-components';

import React, { ReactNode, CSSProperties } from 'react';

import { List } from 'antd';

export const ListItem = (props: {
    icon?: ReactNode,
    title: ReactNode,
    description?: ReactNode,
    extra?: ReactNode,
    actions?: Array<ReactNode>,
    active?: boolean,
    reverseFill?: boolean,
    fillColor?: string,
    color?: string,
    activeFillColor?: string,
    activeColor?: string,
    height?: number,
    onClick?: () => Promise<void>
}) => {

    let { fillColor, color, activeFillColor, activeColor } = props;

    if (!activeFillColor) {
        activeFillColor = '#FFF';
    }
    if (!activeColor) {
        activeColor = '#0091FF';
    }

    let containerStyle: CSSProperties = {
        overflow: 'hidden',
    };

    let iconStyle: CSSProperties = {
    };

    let titleStyle: CSSProperties = {
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
    };

    let descriptionStyle: CSSProperties = {
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        overflow: 'hidden',
    };

    if (props.active) {
        if (props.reverseFill) {
            iconStyle.fontWeight = 900;
            titleStyle.fontWeight = 900;
            iconStyle.color = activeFillColor;
            titleStyle.color = activeFillColor;
            descriptionStyle.color = activeFillColor;
            containerStyle.backgroundColor = activeColor;
        } else {
            iconStyle.fontWeight = 900;
            titleStyle.fontWeight = 900;
            iconStyle.color = activeColor;
            titleStyle.color = activeColor;
            descriptionStyle.color = activeColor;
            containerStyle.backgroundColor = activeFillColor;
        }
    } else {
        if (props.reverseFill) {
            iconStyle.color = fillColor;
            titleStyle.color = fillColor;
            descriptionStyle.color = fillColor;
            containerStyle.backgroundColor = color;
        } else {
            iconStyle.color = color;
            titleStyle.color = color;
            descriptionStyle.color = color;
            containerStyle.backgroundColor = fillColor;
        }
    }

    if (!props.description || props.description === '') {
        return (
            <Container style={containerStyle} onClick={props.onClick}>
                <List.Item actions={props.actions} extra={props.extra}>
                    <>
                        <span style={iconStyle}>{props.icon}</span>
                        <span style={titleStyle}>{props.title}</span>
                    </>
                </List.Item>
            </Container>
        );
    }

    return (
        <Container style={containerStyle} onClick={props.onClick}>
            <List.Item actions={props.actions} extra={props.extra}>
                <List.Item.Meta
                    avatar={<span style={iconStyle}>{props.icon}</span>}
                    title={<span style={titleStyle}>{props.title}</span>}
                    description={<span style={descriptionStyle}>{props.description}</span>}
                />
            </List.Item>
        </Container>
    );
};

export default ListItem;

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
`;
